<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		<title>注册</title>
		<%@ include file="/common/meta.jsp"%>
		<link rel="stylesheet" href="${ctx}/css/reset.css"/>
		<link rel="stylesheet" href="${ctx}/css/register.css"/>
		<script type="text/javascript" src="${ctx}/js/jquery-1.7.2.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="header clearfix">
				<div class="functions" id="rolllink">
					<a href="${ctx}/index.jsp">已有账号登录</a>
				</div>
			</div>
			<dl class="regbody clearfix">
				<dt class="regtype left" id="rtypes">
					<a href="javascript:void(0)" rel="#user" class="rtype user selected">用户</a>
					<a href="javascript:void(0)" rel="#docr" class="rtype docr">医生</a>
				</dt>
				<dd class="regform left">
					<div class="apply" id="user">
						<form name="userForm" action="${ctx}/user/user-register.html" class="clearfix" method="post">
							<div class="email bg">
								<input type="text" id="usermail" name="email"/>
								<label for="usermail">邮箱</label>
							</div>
							<div class="name bg">
								<input type="text" id="username" name="username"/>
								<label for="username">用户名</label>
							</div>
							<div class="info bg">
								<textarea id="userinfo" name="info" cols="30" rows="10"></textarea>
								<label for="userinfo">个人简介（工作行业、有无病史，或者一些个人的简单介绍）</label>
							</div>
							<button type="button" id="usersubmit" class="applybtn"><b>申请注册</b></button>
						</form>
					</div>
					<div class="apply hide" id="docr">
						<form name="docrForm" action="${ctx}/user/doctor-register.html" class="clearfix" method="post">
							<div class="email bg">
								<input type="text" id="docrmail" name="email"/>
								<label for="docrmail">邮箱</label>
							</div>
							<div class="name bg">
								<input type="text" id="docrname" name="username"/>
								<label for="docrname">用户名</label>
							</div>
							<div class="info bg">
								<textarea id="docrinfo" name="info" cols="30" rows="10"></textarea>
								<label for="docrinfo">个人简介（职业背景、专业技能，比如外科医生、民事律师）</label>
							</div>
							<button type="button" id="docrsubmit" class="applybtn"><b>申请注册</b></button>
						</form>
					</div>
				</dd>
			</dl>
			
			<div class="foot">
				医宝网版权所有&nbsp;&nbsp;&copy;2012-2013&nbsp;&nbsp;<a href="#">京ICP备10217266号</a>&nbsp;&nbsp;<a href="#">联系我们</a>&nbsp;&nbsp;<a href="#">友情链接</a>
			</div>
		</div>
		
		<script type="text/javascript">
		$(document).ready(function(){
			// 注册类型选择效果
			var tabs = function(event) {
				var target = $(this.rel);
				$(this).addClass(event.data.cls).siblings().removeClass(event.data.cls);
				$(target).show().siblings('div').hide();
			};
			$('#rtypes').find('a').bind('click',{cls:'selected'},tabs);

			// 输入文字后提示消失效果
			var inputs = $('#usermail, #username, #userinfo, #docrmail, #docrname, #docrinfo');
			inputs.val('');
			inputs.bind('keyup focus',function(){
				var label = $(this).siblings('label');
				if($(this).val() === '') { // 绝对空：.replace(/(^\s*|\s*$)/gi,'')===''
					label.show();
				} else {
					label.hide();
				}
			});
			
			
			$("#usermail").focus();		//进入页面,初始选中
			$("#usermail").blur(function(){
				var usermail = $(this).val();
				if(usermail == ""){
				 	$(this).after("<span>邮箱不能为空</span>");
				} else if(!usermail.match(/^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/)){
				     $(this).after("<span>格式不正确！请重新输入</span>");
				} else {
					$.getJSON("user/check-email.html",{email:usermail},function(json){
						if(json == 'error'){
							$("input[id='usermail']").after("<span>邮箱已存在</span>");
						} else if (json == "success") {
							//暂时不予提示
						}
					});
				}
			}).focus(function(){
				if($("input[id='usermail'] ~ span").length>0){
					$("input[id='usermail'] ~ span").remove();
				}
			});
			
			$("input[id='username']").blur(function(){
				var username = $(this).val();
				if(username == ""){
				 	$(this).after("<span>用户名不能为空</span>");
				} else {
					$.getJSON("user/check-name.html",{username:username},function(json){
						if(json == 'error'){
							$("input[id='username']").after("<span>用户名已存在</span>");
						} else if (json == "success") {
							//暂时不予提示
						}
					});
				}
			}).focus(function(){
				if($("input[id='username'] ~ span")[0]){
					$("input[id='username'] ~ span").remove();
				}
			});
			
			$("#usersubmit").click(function(){
				var usermail = $("#usermail").val();
				var username = $("input[id='username']").val();
				if(usermail == ""){// 为空
					$("#usermail").after("<span>邮箱不能为空</span>");
					return false;
				} else if(!usermail.match(/^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/)){
				     $("#usermail").after("<span>格式不正确！请重新输入</span>");
				     return false;
				}
				if(username == ""){// 为空
					$("#username").after("<span>用户名不能为空</span>");
					return false;
				}
				
				$.getJSON("user/check-email.html",{email:usermail},function(json){
					if(json == "error"){
						alert("邮箱已存在");
					} else if (json == "success") {
						$.getJSON("user/check-name.html",{username:username},function(json){
							if(json == "error"){
								alert("用户名已存在");
							} else if (json == "success") {
								document.userForm.submit();
							}
						});
					}
				});
			});
			
			
			$("#docrmail").blur(function(){
				var docrmail = $(this).val();
				if(docrmail == ""){
				 	$(this).after("<span>邮箱不能为空</span>");
				} else if(!docrmail.match(/^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/)){
				     $(this).after("<span>格式不正确！请重新输入</span>");
				} else {
					$.getJSON("user/check-email.html",{email:docrmail},function(json){
						if(json == 'error'){
							$("input[id='docrmail']").after("<span>邮箱已存在</span>");
						} else if (json == "success") {
							//暂时不予提示
						}
					});
				}
			}).focus(function(){
				if($("input[id='docrmail'] ~ span").length>0){
					$("input[id='docrmail'] ~ span").remove();
				}
			});
			
			$("input[id='docrname']").blur(function(){
				var docrname = $(this).val();
				if(docrname == ""){
				 	$(this).after("<span>用户名不能为空</span>");
				} else {
					$.getJSON("user/check-name.html",{username:docrname},function(json){
						if(json == 'error'){
							$("input[id='docrname']").after("<span>用户名已存在</span>");
						} else if (json == "success") {
							//暂时不予提示
						}
					});
				}
			}).focus(function(){
				if($("input[id='docrname'] ~ span")[0]){
					$("input[id='docrname'] ~ span").remove();
				}
			});
			
			$("#docrsubmit").click(function(){
				var docrmail = $("#docrmail").val();
				var docrname = $("input[id='docrname']").val();
				if(docrmail == ""){// 为空
					$("#docrmail").after("<span>邮箱不能为空</span>");
					return false;
				} else if(!docrmail.match(/^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/)){
				     $("#docrmail").after("<span>格式不正确！请重新输入</span>");
				     return false;
				}
				if(docrname == ""){// 为空
					$("#docrname").after("<span>用户名不能为空</span>");
					return false;
				}
				
				$.getJSON("user/check-email.html",{email:docrmail},function(json){
					if(json == "error"){
						alert("邮箱已存在");
					} else if (json == "success") {
						$.getJSON("user/check-name.html",{username:docrname},function(json){
							if(json == "error"){
								alert("用户名已存在");
							} else if (json == "success") {
								document.docrForm.submit();
							}
						});
					}
				});
			});
		});
		</script>
	</body>
</html>